import React, { useState, useEffect } from 'react';
import { MainMenu } from 'base/ctl/menu';
import { Time } from 'base/ctl/base';
import { Title } from 'base/ctl/title';
import { DlgLog } from 'base/ctl/log';
import { uReal, obj_int, obj_str, obj_empty, uDb, cline, Wait, NuiBt, useHigh } from 'sui';
import { loc } from 'local/index';
import { MtTitle, SideBtn } from '../ctl';
import { DlgCode, DlgSide } from './ctl';
import { get_tp, get_mt } from '../cmd';

const SBack = ({ umd, wsn, hreturn }) => {
    const [cur, setCur] = useState();
    const [open_menu, openMenu] = useState(false);
    const [open_log, openLog] = useState(false);
    const [open_code, openCode] = useState(false);
    const [open_side, openSide] = useState(false);
    const [wait, setWait] = useState(false);
    const [info, setInfo] = useState();
    const [err, setErr] = useState();
    const [main, setMain] = useState();
    const [auto, setAuto] = useState();
    const [hand, setHand] = useState();
    const [high] = useHigh(10, 200)

    useEffect(() => {
        setInfo("");
        setErr("");
    }, []);

    const reload = (mod, bsn, mt, err) => {
        uDb(null, `${mod}/get`,
            {
                line: cline(),
                k: bsn,
            },
            r => {
                r["mt"] = mt;
                r["mod"] = mod;

                setErr("");
                setMain(r);
                setWait(false);
            }, e => {
                setErr(err);
                setMain(null);
                setWait(false);
            });

        uDb(null, "sidehand/list", { line: cline() },
            r => {
                const f = r.find(d => d.sn === bsn);
                setHand(f);
            }, e => setHand(null));

        uDb(null, "sideauto/list", { line: cline() },
            r => {
                const f = r.find(d => d.sn === bsn);
                setAuto(f);
            }, e => setAuto(null));
    };

    const hside = (v) => {
        if (obj_empty(main)) {
            return;
        }

        setWait(true);

        const sn = obj_str(main, "sn");
        const mt = obj_str(main, "mt");
        const side_num = obj_int(v, "num");
        const pos = obj_str(v, "pos");
        const mod = get_tp(mt);

        uReal(null, "stock/backmt",
            {
                line: cline(),
                sn: sn,
                num: side_num,
                pos: pos,
                mt: mt,
                tp: cur,
            },
            r => reload(mod, sn, mt, "没有找到物料"),
            e => {
                setWait(false);
                setErr("修改失败");
            });
    };

    const hcode = (v) => {
        const mt = v[0];
        const bsn = v[2];

        const mod = get_tp(mt);
        if (!mod) {
            setErr("物料类型错误");
            return;
        }

        setWait(true);

        reload(mod, bsn, mt, "没有找到物料");
    };

    const menu = [{
        label: loc("base_157"),
        name: "log",
        hcmd: () => openLog(true),
    }];

    const Lab = ({ label, sub, width="w-32" }) => <Title label={label} sub={sub} cl="black" className="my-2 ml-4" width={width}/>;

    const getView = () => {
        if (obj_empty(main)) {
            return null;
        }

        const mt = obj_str(main, "mt");

        const getBulk = () => {
            const dnum = obj_int(main, "dnum");
            const snum = obj_int(main, "snum");

            if (snum === 0) {
                return "";
            }

            return `${dnum % snum}`;
        };

        const getBox = () => {
            const dnum = obj_int(main, "dnum");
            const snum = obj_int(main, "snum");

            if (snum === 0) {
                return "";
            }

            return `${Math.trunc(dnum / snum)}`;
        };

        const getBsn = () => {
            if (mt === "G" || mt === "T") {
                return (
                    <>
                        <Lab label="规值" sub={obj_str(main, "std")}/>
                        <Lab label="分规值" sub={obj_str(main, "sub")}/>
                        <Lab label="级别" sub={obj_str(main, "level")}/>
                    </>
                );
            } else if (mt === "C") {
                return (
                    <>
                    <Lab label="型号" sub={obj_str(main, "tech")} width="w-56"/>
                    <Lab label="材料" sub={obj_str(main, "stuff")}/>
                    </>
                );
            } else if (mt === "S") {
                return (
                    <>
                    <Lab label="型号" sub={obj_str(main, "tech")} width="w-56"/>
                    <Lab label="AB面" sub={obj_str(main, "face")}/>
                    </>
                );
            }

            return null;
        };

        return (
            <div className="flex flex-col">
                <div className="flex flex-col">
                    <div className="bg-white flex flex-col mt-6 mx-4">
                        <div className="bg-green-700 pl-4 text-2xl text-white">批次</div>
                        <div className="inline-flex">
                            <Lab label="批次号" sub={obj_str(main, "sn")} width="w-64"/>
                            <Lab label="类型" sub={get_mt(mt)}/>
                            <Lab label="仓位" sub={obj_str(main, "pos")}/>
                            <Lab label="球径" sub={obj_str(main, "ball")}/>
                            {getBsn()}
                        </div>
                    </div>
                    <div className="bg-white flex flex-col mt-6 mx-4">
                        <div className="bg-green-700 pl-4 text-2xl text-white">仓库数量</div>
                        <div className="inline-flex">
                            <Lab label="总数" sub={obj_str(main, "dnum")}/>
                            <Lab label="盒数" sub={obj_str(main, "box")}/>
                            <Lab label="单盒数量" sub={obj_str(main, "snum")}/>
                            <Lab label="整装盒数" sub={getBox()}/>
                            <Lab label="散料数量" sub={getBulk()}/>
                        </div>
                    </div>
                    <div className="bg-white flex flex-col mt-6 mx-4">
                        <div className="bg-blue-700 pl-4 text-2xl text-white">线边库存-自动线</div>
                        <div className="inline-flex">
                            <Lab label="数量" sub={obj_str(auto, "num")}/>
                        </div>
                    </div>
                    <div className="bg-white flex flex-col mt-6 mx-4">
                        <div className="bg-teal-700 pl-4 text-2xl text-white">线边库存-人工线</div>
                        <div className="inline-flex">
                            <Lab label="数量" sub={obj_str(hand, "num")}/>
                        </div>
                    </div>
                </div>
            </div>
        );
    };

    const getInfo = () => {
        if (err) {
            return <div className="text-red-600">错误： <span className="ml-4">{err}</span></div>;
        }

        return <div className="text-blue-600">{info}</div>;
    };

    const hAction = (v) => {
        setCur(v);
        openSide(true);
    };

    const is_stock = () => {
        if (obj_empty(main)) {
            return true;
        }

        return !(obj_empty(auto) && obj_empty(hand));
    };

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 justify-between">
                <div className="inline-flex items-center">
                    <div className="ml-2 mr-4">
                        <MainMenu value={menu} open={open_menu} setOpen={openMenu}/>
                    </div>
                    <MtTitle sub="扫码退料"/>
                </div>
                <Time className="text-2xl"/>
                <NuiBt className="w-32 h-16" hcmd={hreturn}>返回</NuiBt>
            </div>
            <div className="flex flex-row items-start mt-1">
                <div className="flex flex-col w-full">
                    <div className="inline-flex justify-between my-4 mr-1">
                        <div className="w-full bg-gray-200 text-3xl flex items-center justify-center h-32 border border-white">
                            {getInfo()}
                        </div>
                        <SideBtn label="扫码" cl="yellow" hcmd={() => openCode(true)}/>
                        <SideBtn label="仓库" cl="blue" hcmd={() => hAction("stock")} disabled={is_stock()}/>
                        <SideBtn label="自动线" cl="blue" hcmd={() => hAction("sideauto")} disabled={obj_empty(auto)}/>
                        <SideBtn label="人工线" cl="teal" hcmd={() => hAction("sidehand")} disabled={obj_empty(hand)}/>
                    </div>
                    <div style={{ height: `${high - 250}px`, width: "100%" }} className="my-1 border">
                        {getView()}
                    </div>
                </div>
            </div>
            <DlgLog open={open_log} setOpen={openLog}/>
            <DlgCode open={open_code} setOpen={openCode} hcmd={hcode}/>
            <DlgSide open={open_side} setOpen={openSide} cur={main} hcmd={hside}/>
            <Wait wait={wait}/>
        </div>
    );
};

export {SBack};
